<template>
 
  <div class="adout">
    <navComp :title="$route.meta.title" :back="$route.meta.back"></navComp>
    <div class="head">
      <van-row>
        <van-col span="3"
          ><van-icon name="location-o" size="2rem" class=""
        /></van-col>
        <van-col span="7"
          ><img src="../../assets/img/logo/white.png" alt="" class="logo"
        /></van-col>
        <van-col span="11"
          ><van-search placeholder="请输入搜索关键词" class="inpt"
        /></van-col>
        <van-col span="3"><van-icon name="shop-o" size="2rem" /></van-col>
      </van-row>
      <div class="box">
        <div class="navigation">
          <van-tabs
            color="#fff"
            title-inactive-color="#DDD"
            title-active-color="#FFF"
            background="rgba(0,0,0,0)"
          >
            <van-tab
              v-for="(item, index) in adoutlist"
              :title="item.catename"
              :key="index"
            >
            </van-tab>
          </van-tabs>
        </div>
        <div class="category">
          <img
            src="../../assets/img/img/cate.38269b9d.png"
            alt=""
            class="navto"
          />
          <span class="txt">分类</span>
        </div>
      </div>
    </div>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, id) in bannerlist"
          :key="item.id"
          class="banner"
        >
          <img
            :src="`http://localhost:3000${item.img}`"
            alt=""
            class="bannerimg"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="kingkong">
      <ul>
        <li>
          <img src="../../assets/img/kingkong/brand.png" alt="" />
          <p>限时秒杀</p>
        </li>
        <li>
          <img src="../../assets/img/kingkong/top.png" alt="" />
          <p>畅销商品</p>
        </li>
        <li>
          <img src="../../assets/img/kingkong/seckill.png" alt="" />
          <p>品质大牌</p>
        </li>
        <li>
          <img src="../../assets/img/kingkong/selfsupport.png" alt="" />
          <p>小U自营</p>
        </li>
        <li>
          <img src="../../assets/img/kingkong/integral.png" alt="" />
          <p>积分商城</p>
        </li>
      </ul>
    </div>
    <div class="seckill">
      <div class="left">
        <div hover-class="touchOpacity" class="leftseckill">
          <span class="seckilltext">限时秒杀</span>
          <span class="lefttext">查看更多 ></span>
        </div>
        <div class="left_seckill_info">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <img
            src="../../assets/img/d6a0eff0-70be-11ea-91a2-9395060d7390.jpg"
            alt=""
            class="seckillimg"
          />
        </div>
      </div>
      <div class="right">
        <div class="right1">
          <h4>品牌上新</h4>
          <p>9点整，抢大牌</p>
          <h5>疯狂抢红包 ></h5>
        </div>
        <div class="right2">
          <h4>日用好物</h4>
          <p>愿君多采撷</p>
          <h5>塞满奖券 ></h5>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="bodytext">
        <p class="text-w">双十一尖货预购</p>
        <p class="text-q">畅购全球</p>
      </div>
      <div class="bodybox" scroll-x>
        <div
          v-for="(item, index) in bodyimg"
          :key="item.index"
          class="body-img"
        >
          <img :src="item.src" alt="" class="body-img-txt" />
        </div>
      </div>
    </div>
    <van-tabs type="card" @click="changeOk">
      <van-tab
        :title="item.title"
        v-for="(item, index) in hortText"
        :key="index"
        ><van-card
          v-for="m in goodslist[hortIndex] ? goodslist[hortIndex].content : []"
          :key="m.id"
          :price="m.price"
          :title="m.goodsname"
          :thumb="`http://localhost:3000${m.img}`"
          :origin-price="m.market_price"
        >
          <template #num>
            <van-button type="warning" size="mini">立即抢购</van-button>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      adoutlist: [],
      bannerlist: [],
      seckilllist: [],
      goodslist: [],
      hortIndex: 0,
      time: "1676550948000",
      bodyimg: [
        { src: require("../../assets/img/commodity/01.png") },
        { src: require("../../assets/img/commodity/02.png") },
        { src: require("../../assets/img/commodity/03.png") },
        { src: require("../../assets/img/commodity/04.png") },
        { src: require("../../assets/img/commodity/05.png") },
      ],
      hortText: [
        { title: "热门推荐" },
        { title: "上新推荐" },
        { title: "所有商品" },
      ],
    };
  },
  created() {
    // console.log(this.$router);
    // console.log(this.$router.options);
  },
  mounted() {
    this.Retcates();
    this.Retbanners();
    this.Retseckills();
    this.Retgoodss();
    
    
  },
  methods: {
    Retcates() {
      this.$api.Retcate().then((res) => {
        console.log(res);
        this.adoutlist = res.data.list;
      });
    },
    Retbanners() {
      this.$api.Retbanner().then((res) => {
        console.log(res);
        this.bannerlist = res.data.list;
      });
    },
    Retseckills() {
      this.$api.Retseckill().then((res) => {
        console.log(res);
        this.seckilllist = res.data.list;
      });
    },
    changeOk(e) {
      console.log(e);
      this.hortIndex = e;
    },
    Retgoodss() {
      this.$api.Retgoods().then((res) => {
        console.log(res);
        this.goodslist = res.data.list;
        // this.goodslist = this.goodslist[res.hortText].content
        // console.log(this.goodslist);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.adout {
  width: 100%;
  height: 1000px;
  background-color: #f2f2f2;
  // margin-top: 40px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.head {
  color: white;
  width: 100%;
  font-size: 18px;
  background: linear-gradient(#ff6040, #ff8a80);
  text-align: center;
  line-height: 50px;
  font-weight: 600;
  margin-top: 40px;
  .logo {
    width: 100px;
    height: 26px;
  }
  .inpt {
    height: 40px;
    width: 189px;
    background: linear-gradient(#ff6040, #ff8a80);
  }
}
.box {
  width: 100%;
  height: 45px;
  display: flex;
  .navigation {
    width: 75%;
  }
  .category {
    display: flex;
    width: 25%;
    .navto {
      width: 26px;
      height: 28px;
      margin-top: 10px;
      margin-left: 10px;
    }
    .txt {
      font-size: 23px;
      margin-left: 5px;
    }
  }
}
.banner {
  width: 100%;
  height: 200px;
  margin-top: 10px;
  .bannerimg {
    width: 100%;
    height: 200px;
  }
}
.kingkong {
  width: 100%;
  height: 90px;
  background-color: white;
  // background-color: #624444;
  overflow: hidden;
  margin-top: 20px;
  ul {
    display: flex;
    flex: 1;
    justify-content: space-around;
    margin-top: 10px;
    li {
      width: 75px;
      text-align: center;
      img {
        width: 42px;
        height: 42px;
      }
    }
  }
}
.seckill {
  display: flex;
  margin-top: 20px;
  width: 100%;
  background-color: white;
  height: 250px;
  .left {
    width: 200px;
    height: 210px;
    background-image: url("../../assets/img/plate/index/kingkong/big.png");
    margin-top: 20px;
    margin-left: 5px;
    .leftseckill {
      margin-top: 10px;
      .seckilltext {
        margin-right: 50px;
        color: darkgreen;
        margin-left: 5px;
      }
      .lefttext {
        font-size: 10px;
      }
    }
  }
  .right {
    margin-left: 5px;
    margin-top: 20px;
    .right1 {
      width: 200px;
      height: 100px;
      background-image: url("../../assets/img/plate/index/kingkong/small.png");
      background-size: cover;
      overflow: hidden;
      h4 {
        color: #ff8a80;
        margin-left: 10px;
        margin-top: 10px;
      }
      P {
        font-size: 10px;
        color: #ff8a80;
        margin-top: 20px;
        margin-left: 10px;
      }
      h5 {
        background-color: #ff8a80;
        width: 80px;
        height: 20px;
        color: #fff;
        margin-left: 10px;
        margin-top: 5px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
      }
    }
    .right2 {
      width: 200px;
      height: 100px;
      margin-top: 10px;
      background-image: url("../../assets/img/plate/index/kingkong/small/02.png");
      background-size: cover;
      h4 {
        color: #af40ff;
        margin-left: 10px;
        margin-top: 10px;
      }
      P {
        font-size: 10px;
        color: #af40ff;
        margin-top: 20px;
        margin-left: 10px;
      }
      h5 {
        background-color: #af40ff;
        width: 80px;
        height: 20px;
        color: #fff;
        margin-left: 10px;
        margin-top: 5px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
      }
    }
  }
}
.left_seckill_info {
  margin-top: 5px;
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: darkgreen;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: darkgreen;
  }
  .seckillimg {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 1px solid #ff6040;
    margin: 40px 5px;
  }
}
.body {
  margin-top: 20px;
  width: 100%;
  height: 150px;
  background-color: white;
  overflow-x: auto;
  overflow: hidden;
  .bodytext {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    .text-w {
      color: #ff6040;
      font-weight: 800;
    }
    .text-q {
      color: gray;
    }
  }
  .bodybox {
    width: 100%;
    display: flex;
    margin-top: 10px;
    .body-img {
      width: 25%;
    }
    .body-img-txt {
      width: 90%;
      height: 100%;
    }
  }
}
</style>
